<template>
  <div class="commdetail">
    <div class="detail_hander">
      <h1 class="detail_title">商品查看</h1>
    </div>
    <div class="detail_cotent">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input disabled placeholder="请输入商品名称" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input disabled placeholder="请输入商品描述" v-model="form.subtitle"></el-input>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-input disabled placeholder="请输入商品描述" v-if="!form.status" value="已下架"></el-input>
          <el-input disabled placeholder="请输入商品描述" v-else value="在售"></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="form.region" placeholder="请选择一级品类">
            <el-option
              v-for="(item,index) in region1list"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>`
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input disabled class="inp" placeholder="价格" v-model="form.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <!-- stock -->
          <el-input disabled class="inp" placeholder="库存" v-model="form.stock">
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <img class="image" v-if="form.mainImage" :src="form.imageHost+form.mainImage" alt srcset />
          <!-- 本地可以访问 -->
          <!-- <img class="image" v-if="form.mainImage" :src="form.mainImage" alt srcset /> -->
          <img
            class="image"
            v-else
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584113118119&di=d3fbabb647a1691ced3e6ae869b293a3&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D30305038%2C711507037%26fm%3D214%26gp%3D0.jpg"
            alt
            srcset
          />
        </el-form-item>
        <el-form-item label="商品详情">
          <p v-html="form.detail"></p>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { deatil, category1 } from "../../request/http";
export default {
  data() {
    return {
      form: {},
      region1list: {}
    };
  },
  mounted() {
    deatil(this.$route.query.data).then(res => {
      console.log(res.data.data);

      this.form = res.data.data;
      this.list();
    });
  },
  methods: {
    list() {
      // categoryId=100002
      category1().then(res => {
        this.region1list = res.data.data;
        console.log(this.region1list);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/Scss/index.scss";
.inp {
  width: 30%;
}
.image {
  width: 100px;
  height: 100%;
}
.detail_cotent {
  @include Wm(90%);
}
.detail_hander {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail_title {
  display: inline-block;
  font-weight: normal;
}
.commdetail {
  @include Wm(95%);
}
</style>